<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>BootScript+AngularJs</title>
		<script type="text/javascript" src="../js/angular.min.js"></script>
		<script type="text/javascript" src="../js/jquery.js"></script>
		<script type="text/javascript" src="../js/bootstrap.min.js"></script>
		<link rel="stylesheet" href="../css/bootstrap/bootstrap.min.css" />
	</head>

	<body ng-app="paginationApp" ng-controller="paginationCtrl">
		<table class="table-bordered" align="center" width="450px" height="120px">
			<tr>
				<th>序号</th>
				<th>编号</th>
				<th>商品名</th>
				<th>价格</th>
			</tr>
			<tr ng-repeat="p in products">
				<td>{{$index+1}}</td>
				<td>{{p.id}}</td>
				<td>{{p.name}}</td>
				<td>{{p.price}}</td>
			</tr>
		</table>
		<!--  分页按钮 -->
		<div>
			<ul class="pagination pull-right">
				<li>
					<a ng-click="prev()">上一页</a>
				</li>
				<li ng-repeat="page in pageList" ng-class="{active: isActivePage(page)}" >
					<a ng-click="selectPage(page)">{{page}}</a>
				</li>
			
				<li>
					<a href ng-click="next()">下一页</a>
				</li>
			</ul>
		</div>
	</body>

	<script type="text/javascript">
		var paginationApp = angular.module("paginationApp", []);
		paginationApp.controller("paginationCtrl", ["$scope", "$http", function($scope, $http) {
			$scope.currentPage = 1; //当前页
			$scope.pageSize = 4; //每页记录数
			$scope.totalCount = 0; //总记录数
			$scope.totalPages = 0; //总页数

			$scope.prev = function() {
				$scope.selectPage($scope.currentPage - 1);
			}
			$scope.next = function() {
				$scope.selectPage($scope.currentPage + 1);
			}
			$scope.selectPage = function(page) {

				$http({
					method: 'GET',
					url: '6_'+page+'.json',
					params: {
						page: page,
						size: $scope.pageSize
					}
				}).error(function(data, status, headers, config) {
					alert("页码cuowu")
				}).success(function(data, status, headers, config) {
					$scope.products = data.products;
					$scope.totalCount = data.totalCount;
					$scope.totalPages = Math.ceil($scope.totalCount / $scope.pageSize);
					$scope.currentPage=page;//当前页码
					//设置分页条显示
					var begin;//第一个页码
					var end;//最后一个页码
					begin=$scope.currentPage-5;
					if(begin<1){
						begin=1;
					}
					end=begin+9
					if(end>$scope.totalPages){
						end=$scope.totalPages;
					}
					begin=end-9;
					if(begin<1){
						begin=1;
					}
					var pageList=new Array();
					for(var i=begin;i<end;i++){
						pageList.push(i);
					}
					$scope.pageList=pageList;
				});
			}
			//判断是否是当前页
			$scope.isActivePage=function(page){
				return page===$scope.currentPage;
			}
			$scope.selectPage(1);
		}])
	</script>

</html>